<template>
  <div class="productTagBox" v-if="data">
    <div class="productTagBox-item" v-for="item in data">
      <div class="productTagBox-head">
        <h3>{{ item.productTagName }}</h3>
      </div>
      <div class="productTagBox-main list-b-8 dlText-80">
        <FlexBox :list="3" :margin="2">
          <dl>
            <dt>标签类型：</dt>
            <dd>{{ proxy.$arrFind(proxy.$optionsArr.tagType, item.tagType, 'value', 'label') }}</dd>
          </dl>
          <dl>
            <dt>标签形状：</dt>
            <dd>{{ proxy.$arrFind(proxy.$optionsArr.tagShape, item.tagShape, 'value', 'label') }}</dd>
          </dl>
          <dl>
            <dt>套装枚数：</dt>
            <dd>{{ item.matchQuantity }}枚</dd>
          </dl>
          <dl>
            <dt>被贴物：</dt>
            <dd>{{ item.postedContent || '--' }}</dd>
          </dl>
          <dl>
            <dt>标签尺寸：</dt>
            <dd>{{ item.tagWidth }}*{{ item.tagHeight }} mm</dd>
          </dl>
          <dl>
            <dt>标签R角：</dt>
            <dd>{{ item.tagBorderRadius }} mm</dd>
          </dl>
          <dl>
            <dt>标签边空：</dt>
            <dd>{{ item.tagBorder }} mm</dd>
          </dl>
          <dl v-if="item.surfaceRequires" class="wAuto">
            <dt>表面要求：</dt>
            <dd>{{ surfaceRequiresName(item.surfaceRequires) }}</dd>
          </dl>
        </FlexBox>
        <div class="productTagBox-tags">
          <ul v-for="(tags, tagsIndex) in tagsArr(item.productTagPrintingLayerList)">
            <li v-for="(tag, tagIndex) in tags" :style="{
              width: `calc( (100% + 8px) /${listNumber} - 8px)`,
              paddingBottom: [1, 3].includes(item.tagType) ? '32px' : '0'
            }">
              <div class="tagName">
                {{ tag.printingLayerName }}{{ tag.liuJiaoTextureName ? '【留胶材质：' + tag.liuJiaoTextureName + '】' : '' }}
              </div>
              <div class="tagOpened" v-if="[2, 3].includes(item.tagType) && tagsIndex === 0 && tagIndex === 0">
                <img src="@/images/openedIcon.png" />
              </div>
              <div class="p-8 list-b-2">
                <p>{{ `使用材料：${tag.printingMaterialName || item.productTagPrintingLayerList[0].printingMaterialName}` }}
                </p>
                <p>{{ `底膜颜色：${tag.baseFilmColorName || '透明'}` }}</p>
                <p v-if="tag.technoPlaces">{{ `数码位数：${tag.technoPlaces}位【${tag.technoColor === 0 ? '黑码' : '彩码'}】` }}</p>
                <p v-if="tag.barCodePlaces">{{ `条码位数：${tag.barCodePlaces}位` }}</p>
              </div>
              <div class="coating list-r-16" v-if="[1, 3].includes(item.tagType) && tagsIndex === 0 && tagIndex === 0">
                <span>{{ `丝网涂层：${item.scrapingCoatingColorName || '无'}` }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ `丝网文字：${item.scrapingWordColorName || '无'}` }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    listNumber?: number;
    options?: any;
  }>(),
  {
    data: [],
    listNumber: 2,
  },
);
const options = reactive({
  surfaceRequires: []
})
const surfaceRequiresName = (arr: any) => {
  let _arr: any = []
  const _list = arr.split(',');
  const _surfaceRequires = options.surfaceRequires
  _arr = _list.map((el: any) => {
    let _name = proxy.$arrFind(_surfaceRequires, el, 'value', 'label')
    return _name
  })
  return _arr.join(" / ")
}
const tagsArr = (arr: any) => {
  let _arr: any = []
  let _tagArr: any = []
  if (proxy.$isArr(arr)) {
    arr.forEach((el: any, index: any) => {
      _tagArr.push(el)
      if (_tagArr.length === props.listNumber || index === arr.length - 1) {
        _arr.push(_tagArr)
        _tagArr = []
      }
    });
  }
  return _arr
}
import { getSurfaceRequires } from '@/utils/optionsArr.ts';
onMounted(() => {
  getSurfaceRequires(options, 'surfaceRequires') //获取表面要求
});
</script>
<style scoped lang="scss">
.productTagBox {
  .productTagBox-item {
    background: $white;
    border: 1px #eee solid;

    .productTagBox-head {
      display: flex;
      align-items: center;

      h3 {
        background: $primary;
        color: $white;
        padding: 0 26px 0 16px;
        line-height: 28px;
        font-weight: normal;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
      }
    }

    .productTagBox-main {
      padding: 8px;
    }

    .productTagBox-tags {
      background: $bg;
      padding: 8px;

      ul {
        display: flex;

        &:not(:last-child) {
          margin-bottom: 8px;
        }

        li {
          background: $white;
          position: relative;
          border-radius: 4px;
          overflow: hidden;

          &:not(:last-child) {
            margin-right: 8px;
          }

          .tagName {
            display: inline-flex;
            background: rgba($color: #000000, $alpha: 0.8);
            color: $white;
            padding: 2px 6px;
            border-bottom-right-radius: 4px;
          }

          .tagOpened {
            position: absolute;
            top: 1px;
            right: 1px;
            pointer-events: none;

            img {
              width: 36px;
            }
          }

          .coating {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            background: $lightgrey;
          }
        }
      }
    }

    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }
}
</style>